<template>
	
	<view>
		<custom-navigation-bar title="我的地址"></custom-navigation-bar>
		<view class="main">
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						联系人
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入联系人"/>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						联系电话
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input"  placeholder="请输入联系电话"/>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						省市区
					</view>
					<view class="form-item-countent">
						<position-picker class="position-picker"  @update-region="regionChange"></position-picker>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
			 	<view class="form-item-1">
			 		<view class="form-item-lable">
			 			所在街道
			 		</view>
			 		<view class="form-item-countent">
			 			<picker @change="jieDaoChange" :range="jieDaoArray"> 
							<input type="text" class="form-item-input" style="margin-top: 25rpx;" v-bind:value="jieDao" placeholder="请选择所在街道"/>
			 			</picker>
			 		</view>
			 		<view class="form-item-right">
			 			<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
			 		</view>
			 	</view>
			 </view>
			 <view class="form-item">
			 	<view class="form-item-1">
			 		<view class="form-item-lable">
			 			所在小区
			 		</view>
			 		<view class="form-item-countent">
			 			<picker @change="xiaoQuChange" :range="xiaoQuArray"> 
			 				<input type="text" class="form-item-input" style="margin-top: 25rpx;" v-bind:value="xiaoQu" placeholder="请选择小区"/>
			 			</picker>
			 		</view>
			 		<view class="form-item-right">
			 			<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
			 		</view>
			 	</view>
			 </view>
			<view class="form-item">
				<view class="form-item-textarea">
					<view class="form-item-lable">
						选择地址
					</view>
					<view class="form-item-countent" >
						<textarea class="form-item-textarea-textarea" @click="selectAddress" v-model="addr_info" placeholder="请选择地址请"></textarea>
					</view>
				</view>
			</view>
			<view class="form-item">
			 	<view class="form-item-1">
			 		<view class="form-item-lable">
			 			默认地址
			 		</view>
			 		<view class="form-item-countent">
			 			 <switch checked color="#FFCC33" style="transform:scale(0.7);margin-top: 15rpx;"/>
			 		</view>
			 	</view>
			 </view>
			 <view class="form-item">
			  	<view class="form-item-1" style="border: none;margin-top: 80rpx;margin-bottom: 80rpx;">
			  		<view class="btn">确定</view>
			  	</view>
			  </view>
		</view>
	</view> 
</template>

<script setup> 
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	import http from '../../utils/http'; 
	components: {
	  CustomNavigationBar
	}; 
	const jieDaoArray = ref(['街道1', '街道2', '街道3', '街道4'])
	const jieDao = ref('')
	function jieDaoChange(e) { 
		 
		jieDao.value = jieDaoArray.value[e.detail.value]
	}
	const xiaoQuArray = ref(['小区1', '小区2', '小区3', '小区4'])
	const xiaoQu = ref('')
	function xiaoQuChange(e) {  
		xiaoQu.value = xiaoQuArray.value[e.detail.value]
	}
	var addr_info=ref('');
	function selectAddress()
	{
		uni.chooseLocation({
			success(res){
				console.log(res);
				 addr_info.value=res.address;
			},
			fail(res) {
				console.log(res);
				uni.showToast({
					icon: "none",
					title: "位置获取失败!"
				})
			}
		}) 
	}
</script>

<style>
	@import "../application/form.scss";
</style>